<template>
  <div class="grimm-tool-bar-item" :class="activeClass" @click="(e)=>onClick(e,label,index)">
    <p>
      <i v-if="icon" class="iconfont" :class="icon" />
    </p>
    <p class="grimm-tool-bar-label">{{label}}</p>
  </div>
</template>
<script>
const name = 'grimm-toolbar-item';
export default {
  name,
  props: {
    index: {
      type: [Number, String],
      default: () => 0,
    },
    barIndex: {
      type: [Number, String],
      default: () => 0,
    },
    label: {
      type: String,
      default: () => '',
    },
    icon: {
      type: String,
      default: '',
    },
    visibleMore: {
      type: Boolean,
      default: false,
    },
    onHandler: {
      type: Function,
      default: _ => _,
    },
    animation: {
      type: String,
      default: () => '',
    },
  },
  computed: {
    activeClass() {
      if (this.index === this.barIndex && !this.visibleMore) {
        return `grimm-tool-bar-active grimm-tool-bar-active-${this.animation}`;
      }
      return '';
    },
  },
  methods: {
    onClick(e, label, index) {
      e.preventDefault();
      this.onHandler(label, index);
    },
  },
};
</script>
<style lang="stylus" >
.grimm-tool-bar-item {
  padding: 8px 12px;
  position: relative;
  text-align: center;

  .iconfont {
    font-size: 18px;
    line-height: 22px;
  }

  .grimm-tool-bar-label {
    transform: scale(0.8);
    line-height: 12px;
  }
}

// 渐显
@keyframes fadeIn {
  0% {
    opacity: 0.3; /* 初始状态 透明度为0 */
  }

  50% {
    opacity: 0.7; /* 中间状态 透明度为0 */
  }

  100% {
    opacity: 1; /* 结尾状态 透明度为1 */
  }
}

// 360度旋转
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

// 摇摆
@keyframes sway {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(-45deg);
  }

  60% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

// 放大
@keyframes enlarge {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

// 缩小
@keyframes shrink {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

.grimm-tool-bar-active {
  color: #ff3e34;
}

.grimm-tool-bar-active-fadeIn {
  color: #ff3e34;
  animation-name: fadeIn; /* 动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count: 1; /* 动画次数 */
  animation-delay: 0s; /* 延迟时间 */
}

.grimm-tool-bar-active-spin {
  color: #ff3e34;
  animation: spin 1s linear;
}

.grimm-tool-bar-active-sway {
  color: #ff3e34;
  animation-name: sway; /* 动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count: 1; /* 动画次数 */
  animation-delay: 0s; /* 延迟时间 */
}

.grimm-tool-bar-active-enlarge {
  color: #ff3e34;
  animation-name: enlarge; /* 动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count: 1; /* 动画次数 */
  animation-delay: 0s; /* 延迟时间 */
}

.grimm-tool-bar-active-shrink {
  color: #ff3e34;
  animation-name: shrink; /* 动画名称 */
  animation-duration: 1s; /* 动画持续时间 */
  animation-iteration-count: 1; /* 动画次数 */
  animation-delay: 0s; /* 延迟时间 */
}
</style>

